<template>
  <div class="page roadIn">
    <sysHeader :active="'4'"></sysHeader>
    <!-- <sysMap ref="sysMap" :markers="markData" @changeCenter="changeCenter"></sysMap> -->
    <!-- <el-autocomplete
      class="search_box"
      v-model="mapLocation.address"
      :fetch-suggestions="querySearch"
      placeholder="请输入详细地址"
      style="width: 100%"
      :trigger-on-focus="false"
      @select="handleSelect"
    >
      <template slot-scope="{ item }">
        <i class="el-icon-search fl mgr10"></i>
        <div style="overflow:hidden;">
          <div class="title">{{ item.title }}</div>
          <span class="address ellipsis">{{ item.address }}</span>
        </div>
      </template>
    </el-autocomplete> -->
    <!-- <bm-local-search class="search_box" :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search> -->
    <div class="model_box" :class="moveFlag1?'leftmodelgo':'leftmodelback'">
      <h1>单车数量</h1>
      <el-button
          @click="closeFlag1"
          class="model_close"
          type="danger"
          icon="el-icon-back"
          circle
        ></el-button>
      <div class="model_top">
        <el-input v-if='keywordFlag' v-model="keyword" placeholder="请选择查询地点"></el-input>
        <el-input v-else :value="showKeyWord" readonly placeholder="请选择查询地点"></el-input>
        <el-select v-model="distance" placeholder="查询范围">
          <el-option
            v-for="item in numbers"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="searchAddress">搜索</el-button>
        <el-button type="primary" @click="clearKeyWord">清除</el-button>
      </div>
      <ul class="address_list" v-if="addressListFlag">
        <li v-for="(item,index) in addressList "  :key='index' @click="setSearchLat(item)">
          {{item.title}}
        </li>
      </ul>
      <div class="model_bottom">
        <sysChart :options="modelOptions" :echart_height="'216px'"></sysChart>
      </div>
    </div>
    <heat-map @getSearchAddress='getSearchAddress' :data="heatData" :markers="markData" :keyword='keyword' location='济南'></heat-map>
    <div class="shareBike_center_img"></div>
    <div class="shareBike_center_mark">
      <!-- <div class="mark"></div>-->
    </div>
    <div class="shareBike_center_bottom">
      <!-- 监测点总数：<span>{{tongji.jiance}}</span>个 -->
      <!-- 单车投放量：<span>{{bikeTotalNum}}</span>量 -->
      <span class="block_span">单车投放总数：</span>
      <DigitRoll :rollDigits="bikeTotalNum"></DigitRoll>辆
    </div>
    <div class="shareBike_l_t" :class="leftGo?'goleft':'backleft'">
      <div class="common_head" @click="showFlag1">
        <div class="common_item active" style="cursor: pointer;">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">单车数量</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="shareBike_l_t_body">
        <sysChart :options="leftTopOptions" :echart_height="'216px'"></sysChart>
      </div>
    </div>
    <div class="shareBike_l_c" :class="leftGo?'goleft':'backleft'">
      <div class="shareBike_l_c_header">单车用户数量</div>
      <div class="shareBike_l_c_body">
        <sysChart :options="leftCenterOptions" :echart_height="'264px'"></sysChart>
      </div>
    </div>
    <div class="shareBike_l_b" :class="leftGo?'goleft':'backleft'">
      <div class="shareBike_l_b_header">共享单车投放比</div>
      <div class="shareBike_l_b_body">
        <div class="roadIn_l_b_tb_h"></div>
        <div class="roadIn_l_b_tb_b"></div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="bike_name"
            label="单车名称"
            align="center"
            :show-overflow-tooltip="true"
            header-align="center"
            width="110"
          >
            <!--
                        <template slot-scope="scope">
                            <span v-if="scope.row.bike_name === '哈罗单车'" style="color:#0091FF">{{scope.row.bike_name}}</span>
                            <span v-if="scope.row.bike_name === '美团单车'" style="color:#F7B500">{{scope.row.bike_name}}</span>
                            <span v-if="scope.row.bike_name === '青桔单车'" style="color:#44D7B6">{{scope.row.bike_name}}</span>
                        </template>
            -->
          </el-table-column>
          <el-table-column
            prop="check_num"
            label="监测数量"
            align="center"
            :show-overflow-tooltip="true"
            header-align="center"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="privatly_num"
            label="私自投放数量"
            align="center"
            :show-overflow-tooltip="true"
            header-align="center"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="rate"
            align="center"
            :show-overflow-tooltip="true"
            header-align="center"
            label="投放比"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="shareBike_r_t">
      <div class="common_head">
        <div class="common_item active" style="cursor: pointer;">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">区域单车数</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="shareBike_r_t_body">
        <div class="shareBike_r_t_box">
          <el-row>
            <el-col :span="8">
              <div class="shareBike_r_t_item" @click="clickTitle(1)">
                <div class="shareBike_r_t_title">景区</div>
                <div class="shareBike_r_t_num">
                  <DigitRoll :rollDigits="tongji.hcz"></DigitRoll>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="shareBike_r_t_item" @click="clickTitle(2)">
                <div class="shareBike_r_t_title">交通</div>
                <div class="shareBike_r_t_num">
                  <DigitRoll :rollDigits="tongji.qcz"></DigitRoll>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="shareBike_r_t_item" @click="clickTitle(3)">
                <div class="shareBike_r_t_title">医院</div>
                <div class="shareBike_r_t_num">
                  <DigitRoll :rollDigits="tongji.qcgc"></DigitRoll>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="shareBike_r_c">
      <div class="common_head">
        <div class="common_item active" style="cursor: pointer;">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">单车折损量</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="shareBike_r_c_body">
        <sysChart :options="rightCenterOptions" :echart_height="'264px'"></sysChart>
      </div>
    </div>
    <div class="shareBike_r_b">
      <div class="shareBike_r_b_header">单车利用率</div>
      <div class="shareBike_r_b_body">
        <div class="shareBike_r_b_box">
          <el-row>
            <el-col :span="8">
              <div class="shareBike_r_b_item">
                <sysChart :options="rightBottomOptions1" :echart_height="'220px'"></sysChart>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="shareBike_r_b_item">
                <sysChart :options="rightBottomOptions2" :echart_height="'220px'"></sysChart>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="shareBike_r_b_item">
                <sysChart :options="rightBottomOptions3" :echart_height="'220px'"></sysChart>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 左侧弹框 -->
    <div class="left_model" :class="moveFlag?'leftmodelgo':'leftmodelback'">
      <div class="left_model_title">
        <span>{{model_title}}</span>
        <el-button
          @click="closeFlag"
          class="model_close"
          type="primary"
          icon="el-icon-back"
          circle
        ></el-button>
      </div>
      <div class="model_content" v-if="clickTitleNum==1">
        <div class="model_title">
           <div class="model_title_item" >景区名称</div> 
           <div class="model_title_item" >单车数量</div> 
        </div>
        <ul class="model_list" v-if="jingQuList.length>0">
          <li class="model_list_item" v-for="(item,index) in jingQuList" :key="index">
            <span >{{item.areaName}}</span>
            <span >{{item.bikeNumber}}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
     <div class="model_content" v-if="clickTitleNum==2">
        <div class="model_title">
           <div class="model_title_item" >交通枢纽名称</div> 
           <div class="model_title_item" >单车数量</div> 
        </div>
        <ul class="model_list" v-if="jiaoTongList.length>0">
          <li class="model_list_item" v-for="(item,index) in jiaoTongList" :key="index">
            <span >{{item.areaName}}</span>
            <span >{{item.bikeNumber}}</span>
          </li>
        </ul>
        <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==3">
        <div class="model_title">
           <div class="model_title_item" >医院名称</div> 
           <div class="model_title_item" >单车数量</div> 
        </div>
        <ul class="model_list" v-if="yiYuanList.length>0">
          <li class="model_list_item" v-for="(item,index) in yiYuanList" :key="index">
            <span >{{item.areaName}}</span>
            <span >{{item.bikeNumber}}</span>
          </li>
        </ul>
        <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sysHeader from "@/components/common/sysHeader.vue";
import sysMap from "@/components/common/sysMap.vue";
import heatMap from "@/components/common/heatMap.vue";
import sysChart from "@/components/common/sysChart.vue";
import DigitRoll from "@huoyu/vue-digitroll";
import config from "@/api/config.js";
import axios from "axios";
import data from '../../../public/bikeHeatmap.json'
export default {
  name: "shareBike",
  data() {
    return {
      keyword:'',
      location:'',
      distance:'',
      moveFlag:false,//运动
      moveFlag1:false,
      model_title:'',//弹框标题
      clickTitleNum: 0, //
      keywordFlag:true,
      showKeyWord:'',
      addressList:[],
      addressListFlag:false,
      leftGo:false,
      searchLat:'',
      searchLng:'',
      numbers: [{
          value: 0.5,
          label: '500米'
        }, {
          value: 1,
          label: '1000米'
        }, {
          value: 1.5,
          label: '1500米'
        }, {
          value: 2,
          label: '2000米'
        }],
      mapLocation: {
        address: undefined,
        coordinate: undefined,
      },
      tongji: {
        hcz: 0,
        qcz: 0,
        qcgc: 0,
      },
      bikeTotalNum: 0,
      heatData: [],
      tableData: [],
      markData: [],
      leftTopOptions: {
        grid: {
          left: "30",
          right: "30",
          bottom: "20",
          top: "20",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#BFE8FF",
            fontSize: 16,
            fontWeight: "bold",
          },
          axisTick: {
            show: false,
          },
          axisLine: { show: false },
          splitLine: { show: false },
          data: ["青桔单车", "美团单车", "哈罗单车"],
        },
        series: [
          {
            // For shadow
            type: "bar",
            itemStyle: {
              color: "rgba(27,158,234,0.2)",
            },
            barWidth: "40%",
            barGap: "-100%",
            barCategoryGap: "40%",
            data: [
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
            ],
            animation: false,
          },
          {
            name: "",
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            type: "bar",
            barWidth: "40%",
            data: [
              {
                value: 0,
                itemStyle: {
                  color: "#44D7B6",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#F7B500",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#0091FF",
                },
              },
            ],
          },
        ],
      },
      modelOptions:{
         grid: {
          left: "8",
          right: "8",
          bottom: "20",
          top: "40",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#BFE8FF",
            fontSize: 16,
            fontWeight: "bold",
          },
          axisTick: {
            show: false,
          },
          axisLine: { show: false },
          splitLine: { show: false },
          data: ["单车总数","青桔单车", "美团单车", "哈罗单车"],
        },
        series: [
          {
            // For shadow
            type: "bar",
            itemStyle: {
              color: "rgba(27,158,234,0.2)",
            },
            barWidth: "40%",
            barGap: "-100%",
            barCategoryGap: "40%",
            data: [
             {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
            ],
            animation: false,
          },
          {
            name: "",
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            type: "bar",
            barWidth: "40%",
            data: [
              {
                value: 0,
                itemStyle: {
                  color: "#fff",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#44D7B6",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#F7B500",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#0091FF",
                },
              },
            ],
          },
        ],
      },
      leftCenterOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          textStyle: {
            color: "#FFFFFF",
            lineHeight: 30,
            fontSize: 14,
            fontWeight: "bold",
          },
          itemWidth: 10,
          itemHeight: 10,
          right: 60,

          orient: "vertical",
          y: "center",
          data: ["哈罗单车", "美团单车", "青桔单车"],
        },
        color: ["#0091FF", "#F7B500", "#44D7B6"],
        series: [
          {
            name: "单车用户数量",
            type: "pie",
            center: ["35%", "50%"],
            radius: ["30%", "60%"],
            clockwise: false,
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: "{d}%",
              fontSize: 14,
              fontWeight: "bold",
              color: "#ffffff",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
              length: 5,
              length2: 5,
            },
            data: [
              { value: 0, name: "哈罗单车" },
              { value: 0, name: "美团单车" },
              { value: 0, name: "青桔单车" },
            ],
          },
        ],
      },
      rightBottomOptions1: {
        tooltip: {},
        title: {
          text: "哈罗单车",
          textStyle: {
            color: "#BFE8FF",
            fontSize: 16,
            fontWeight: "bold",
          },
          bottom: 0,
          left: "center",
        },
        grid: {
          left: "20%",
          right: "20%",
        },
        series: [
          {
            name: "哈罗单车",
            type: "liquidFill", //类型
            data: [0, 0], //数据是个数组 数组的每一项的值是0-1
            outline: {
              //show: true , //是否显示轮廓 布尔值
              borderDistance: 0, //外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: "rgba(0,145,255,1)", //边框的颜色
                borderWidth: 4, //边框的宽度
                //shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                //shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            backgroundStyle: {
              color: "rgba(0,145,255,0.1)", //图表的背景颜色
              //borderWidth: '10',//图表的边框宽度
              //borderColor: '#000',//图表的边框颜色
              itemStyle: {
                shadowBlur: 100, //设置无用
                shadowColor: "rgba(0,145,255,1)", //设置无用
                opacity: 1, //设置无用
              },
            },
            itemStyle: {
              opacity: 0.8, //波浪的透明度
              shadowBlur: 10, //波浪的阴影范围
              shadowColor: "rgba(0,145,255,1)", //阴影颜色
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //鼠标经过波浪颜色的透明度
              },
            },
            color: [
              "rgba(0,145,255,0.8)",
              "rgba(0,145,255,0.9)",
              "rgba(0,145,255,1)",
            ], //水波的颜色 对应的是data里面值
            shape: "circle", //水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
            center: ["50%", "45%"], //图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
            radius: "75%", //图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
            amplitude: 3, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            phase: 0, //波的相位弧度 默认情况下是自动
            period: (value, index) => {
              //控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引

              return index * 2000;
            },
            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: "linear", //初始动画
            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300, //数据更新动画的时长
          },
        ],
        //backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
      },
      rightBottomOptions2: {
        tooltip: {},
        title: {
          text: "美团单车",
          textStyle: {
            color: "#BFE8FF",
            fontSize: 16,
            fontWeight: "bold",
          },
          bottom: 0,
          left: "center",
        },
        grid: {
          left: "20%",
          right: "20%",
        },
        series: [
          {
            name: "美团单车",
            type: "liquidFill", //类型
            data: [0, 0], //数据是个数组 数组的每一项的值是0-1
            outline: {
              //show: true , //是否显示轮廓 布尔值
              borderDistance: 0, //外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: "rgba(0,145,255,1)", //边框的颜色
                borderWidth: 4, //边框的宽度
                //shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                //shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            backgroundStyle: {
              color: "rgba(247,181,0,0.1)", //图表的背景颜色
              //borderWidth: '10',//图表的边框宽度
              //borderColor: '#000',//图表的边框颜色
              itemStyle: {
                shadowBlur: 100, //设置无用
                shadowColor: "rgba(247,181,0,1)", //设置无用
                opacity: 1, //设置无用
              },
            },
            itemStyle: {
              opacity: 0.8, //波浪的透明度
              shadowBlur: 10, //波浪的阴影范围
              shadowColor: "rgba(247,181,0,1)", //阴影颜色
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //鼠标经过波浪颜色的透明度
              },
            },
            color: [
              "rgba(247,181,0,0.8)",
              "rgba(247,181,0,0.9)",
              "rgba(247,181,0,1)",
            ], //水波的颜色 对应的是data里面值
            shape: "circle", //水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
            center: ["50%", "45%"], //图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
            radius: "75%", //图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
            amplitude: 3, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            phase: 0, //波的相位弧度 默认情况下是自动
            period: (value, index) => {
              //控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引

              return index * 2000;
            },
            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: "linear", //初始动画
            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300, //数据更新动画的时长
          },
        ],
        //backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
      },
      rightBottomOptions3: {
        tooltip: {},
        title: {
          text: "青桔单车",
          textStyle: {
            color: "#BFE8FF",
            fontSize: 16,
            fontWeight: "bold",
          },
          bottom: 0,
          left: "center",
        },
        grid: {
          left: "20%",
          right: "20%",
        },
        series: [
          {
            name: "青桔单车",
            type: "liquidFill", //类型
            data: [0, 0], //数据是个数组 数组的每一项的值是0-1
            outline: {
              //show: true , //是否显示轮廓 布尔值
              borderDistance: 0, //外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: "rgba(0,145,255,1)", //边框的颜色
                borderWidth: 4, //边框的宽度
                //shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                //shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            backgroundStyle: {
              color: "rgba(68,215,182,0.1)", //图表的背景颜色
              //borderWidth: '10',//图表的边框宽度
              //borderColor: '#000',//图表的边框颜色
              itemStyle: {
                shadowBlur: 100, //设置无用
                shadowColor: "rgba(68,215,182,1)", //设置无用
                opacity: 1, //设置无用
              },
            },
            itemStyle: {
              opacity: 0.8, //波浪的透明度
              shadowBlur: 10, //波浪的阴影范围
              shadowColor: "rgba(68,215,182,1)", //阴影颜色
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //鼠标经过波浪颜色的透明度
              },
            },
            color: [
              "rgba(68,215,182,0.8)",
              "rgba(68,215,182,0.9)",
              "rgba(68,215,182,1)",
            ], //水波的颜色 对应的是data里面值
            shape: "circle", //水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
            center: ["50%", "45%"], //图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
            radius: "75%", //图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
            amplitude: 3, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            phase: 0, //波的相位弧度 默认情况下是自动
            period: (value, index) => {
              //控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引

              return index * 2000;
            },
            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: "linear", //初始动画
            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300, //数据更新动画的时长
          },
        ],
        //backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
      },
      rightCenterOptions: {
        tooltip: {},
        grid: {
          left: 60,
          right: 50,
          bottom: 50,
          top: 50,
        },
        xAxis: {
          data: ["哈罗单车", "美团单车", "青桔单车"],
          axisLabel: {
            textStyle: {
              color: "#BFE8FF",
              fontSize: 16,
              fontWeight: "bold",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          min: 0, //y轴的最小值
          max: 100, //y轴最大值
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          splitNumber: 5,
          axisLabel: {
            textStyle: {
              color: "#32FFB4",
              fontSize: 14,
              fontWeight: "bold",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "30%",
            data: [
              {
                value: 0,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#0091FF" },
                    { offset: 0.5, color: "#0091FF" },
                    { offset: 1, color: "rgba(255,255,255,0)" },
                  ]),
                },
                emphasis: {
                  itemStyle: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "#0091FF" },
                        { offset: 0.7, color: "#0091FF" },
                        { offset: 1, color: "#0091FF" },
                      ]
                    ),
                  },
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#F7B500" },
                    { offset: 0.5, color: "#F7B500" },
                    { offset: 1, color: "rgba(255,255,255,0)" },
                  ]),
                },
                emphasis: {
                  itemStyle: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "#F7B500" },
                        { offset: 0.7, color: "#F7B500" },
                        { offset: 1, color: "#F7B500" },
                      ]
                    ),
                  },
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#44D7B6" },
                    { offset: 0.5, color: "#44D7B6" },
                    { offset: 1, color: "rgba(255,255,255,0)" },
                  ]),
                },
                emphasis: {
                  itemStyle: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "#44D7B6" },
                        { offset: 0.7, color: "#44D7B6" },
                        { offset: 1, color: "#44D7B6" },
                      ]
                    ),
                  },
                },
              },
            ],
          },
        ],
      },
      bottomShow: false,
      jingQuList:[],
      jiaoTongList:[],
      yiYuanList:[],
    };
  },
  components: {
    sysHeader,
    sysMap,
    sysChart,
    DigitRoll,
    heatMap
  },
  watch: {},
  created() {
    // if(sessionStorage.getItem('heatData')){
    //     this.heatData=JSON.parse(sessionStorage.getItem('heatData'))
    // }else{
    //    this.getHeatMapData()
    // }
    this.getHeatMapData();
    //获取景区交通弄医院数据局
    this.getThreeTypeList()
  },
  mounted() {
    this.getLeftTop();
    this.getLeftCenter();
    this.getLeftBottom();
    this.getRightTop();
    this.getRightCenter();
    this.getRightBottom();
    this.getMarkData();
    this.getCenterBottom();
  },
  methods: {
    showFlag1(){
      this.moveFlag1=true;
      this.leftGo=true
    },
    closeFlag1(){
      this.moveFlag1=false;
      this.leftGo=false
    },
    closeFlag(){
      this.moveFlag=false;
      this.leftGo=false
    },
    //获取景区交通弄医院数据局
    getThreeTypeList(){
      this.$api.get(
        config.basePath + "park/index/getBikeListByType",
        {},
        (res) => {
          console.log(res);
          if(res.data.code==0){
            let obj= res.data.data;
            console.log("景区数据",obj)
            this.jingQuList=obj.list1;
            this.jiaoTongList=obj.list3;
            this.yiYuanList=obj.list2;
          }
        }
      );
    },
     //点击栏目标题展示弹框及其对应数据
    clickTitle(num) {
      // this.moveFlag = !this.moveFlag;
      // this.leftGo=!this.leftGo
      if (num == 1) {
        if(this.moveFlag==true&&this.leftGo==true){
              this.moveFlag=true
              this.leftGo==true
        }else{
            this.moveFlag=!this.moveFlag
            this.leftGo=!this.leftGo
        }
        this.clickTitleNum = 1;
        this.model_title = "景区共享单车概况";
      } else if (num == 2) {
        if(this.moveFlag==true&&this.leftGo==true){
              this.moveFlag=true
              this.leftGo==true
        }else{
            this.moveFlag=!this.moveFlag
            this.leftGo=!this.leftGo
        }
        this.clickTitleNum = 2;
        this.model_title = "交通枢纽单车概况";
      } else if (num == 3) {
       if(this.moveFlag==true&&this.leftGo==true){
              this.moveFlag=true
              this.leftGo==true
        }else{
            this.moveFlag=!this.moveFlag
            this.leftGo=!this.leftGo
        }
        this.clickTitleNum = 3;
        this.model_title = "医院共享单车概况";
      }
    },
    clearKeyWord(){
      this.keyword='';
      this.keywordFlag=true;
      this.distance=''
    },
    getSearchAddress(list){
      console.log("搜索结果传递",list)
      this.addressList=list;
      this.addressListFlag=true;
    },
    setSearchLat(item){
      this.searchLat=item.point.lat;
      this.searchLng=item.point.lng;
      this.showKeyWord=item.title;
      this.keywordFlag=false;
      this.addressListFlag=false
    },
    searchAddress(){
      if(this.keyword==''){
        this.$message({
          message: '请输入位置并在位置列表中选择位置！',
          type: 'error'
        });
        return false
      }
      if(this.distance==''){
        this.$message({
          message: '请选择范围！',
          type: 'error'
        });
        return false
      }
      axios({
        method: "post",
        url: config.basePath + "park/index/getPointBikeNumber",
        data: {
          longitude: this.searchLng,
          latitude: this.searchLat,
          distance:this.distance
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          console.log("res2222", res);
          if (res.status >= 200 && res.status < 300) {
            let data=res.data.data;
            let max=0;
            max = Math.floor(data.anomaly_num / 2) + data.anomaly_num;
            this.modelOptions.series[0].data[0].value=max
            this.modelOptions.series[0].data[1].value=max
            this.modelOptions.series[0].data[2].value=max
            this.modelOptions.series[0].data[3].value=max;
            this.modelOptions.series[1].data[0].value=data.anomaly_num
            this.modelOptions.series[1].data[1].value=data.haluo
            this.modelOptions.series[1].data[2].value=data.meituan
            this.modelOptions.series[1].data[3].value=data.qingju
            // this.keywordFlag=true
          } else {
           // console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    changeCenter({ zoom, location }) {
      if (zoom >= 12) {
        //console.log('显示点信息')
        this.getMarkData();
      } else {
        //console.log('显示区域')
        this.getMarkDatas();
        // console.log('隐藏点信息')
        // this.markData = []
        // this.$nextTick(() => {
        //     this.$refs.sysMap.onHideMarker()
        // })
      }
      this.getCenterBottom();
    },
    getMarkData() {
      this.$api.get(
        config.basePath + "park/index/biekeMark",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            //const data = response.data.data
            this.markData = [];
            this.markData = data;
            //console.log("021",data)
          } else {
            //console.log(response.message);
          }
        }
      );
      // this.$api.get(config.basePath+'park/index/biekeMark', {}, response => {
      //     if (response.status >= 200 && response.status < 300) {
      //         const data = response.data.data.area
      //         //const data = response.data.data
      //         this.markData = []
      //         this.markData = data
      //         //console.log("021",response)
      //     } else {
      //         //console.log(response.message);
      //     }
      // });
    },
    getHeatMapData() {
      //  this.$api.get('http://192.144.163.183:8088/upload/park/bikeHeatmap.json', {}, res => {
      //      console.log("789",res.data);
      //      this.heatData=res.data
      //  })
      axios
        .get("http://192.144.163.183:8088/upload/park/bikeHeatmap.json")
        //.get("../../../public/bikeHeatmap.json")
        .then((res) => {
          //console.log("3232",res.data)
          this.heatData = res.data;
          sessionStorage.setItem("heatData", JSON.stringify(res.data));
        });
    },
    getMarkDatas() {
      this.$api.get(
        config.basePath + "park/index/biekeMark",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data.point;
            this.markData = [];
            this.markData = data;
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightBottom() {
      this.$api.get(
        config.basePath + "park/index/getUseRate",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            data.forEach((item) => {
              //console.log(parseFloat(item.rate)/100)
              const _d = [
                parseFloat(item.rate) / 100,
                parseFloat(item.rate) / 100,
              ];
              if (item.bike_name === "哈罗单车") {
                this.rightBottomOptions1.series[0].data = _d;
              }
              if (item.bike_name === "美团单车") {
                this.rightBottomOptions2.series[0].data = _d;
              }
              if (item.bike_name === "青桔单车") {
                this.rightBottomOptions3.series[0].data = _d;
              }
            });
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightCenter() {
      this.$api.get(
        config.basePath + "park/index/getBreakageRate",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            data.forEach((item) => {
              if (item.bike_name === "哈罗单车") {
                this.rightCenterOptions.series[0].data[0].value =
                  item.breakage_num;
              }
              if (item.bike_name === "美团单车") {
                this.rightCenterOptions.series[0].data[1].value =
                  item.breakage_num;
              }
              if (item.bike_name === "青桔单车") {
                this.rightCenterOptions.series[0].data[2].value =
                  item.breakage_num;
              }
            });
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightTop() {
      this.$api.get(
        config.basePath + "park/index/getRegionBikeNum",
        {},
        (res) => {
          console.log("大会上计划",res)
          if (res.data.code==0) {
            const list = res.data.data;
            console.log("dckjhk ",list)
            list.forEach((item) => {
              if (item.typeName == "景区") {
                this.tongji.hcz = item.bikeNumber;
              }
              if (item.typeName == "医院") {
                this.tongji.qcz = item.bikeNumber;
              }
              if (item.typeName == "交通") {
                this.tongji.qcgc = item.bikeNumber;
              }
            });
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftBottom() {
      this.$api.get(
        config.basePath + "park/index/getBikePutinRate",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.tableData = data;
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftCenter() {
      this.$api.get(
        config.basePath + "park/index/getBikeRegNum",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            data.forEach((item) => {
              let ind = 0;
              if (item.bike_name === "哈罗单车") {
                ind = 0;
              }
              if (item.bike_name === "美团单车") {
                ind = 1;
              }
              if (item.bike_name === "青桔单车") {
                ind = 2;
              }
              this.leftCenterOptions.series[0].data[ind].value = item.reg_num;
            });
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getCenterBottom() {
      this.$api.get(
        config.basePath + "park/index/getCheckPointNum",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.tongji.jiance = data.num;
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftTop() {
      this.$api.get(
        config.basePath + "park/index/getBikeNum",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            let max = 0;
            data.forEach((item) => {
              this.bikeTotalNum += parseInt(item.bike_num);
              if (max < parseInt(item.bike_num)) {
                max = parseInt(item.bike_num);
              }
              let ind = 0;
              if (item.bike_name === "哈罗单车") {
                ind = 2;
              }
              if (item.bike_name === "美团单车") {
                ind = 1;
              }
              if (item.bike_name === "青桔单车") {
                ind = 0;
              }
              this.leftTopOptions.series[1].data[ind].value = item.bike_num;
            });

            max = Math.floor(max / 2) + max;
            this.leftTopOptions.series[0].data[0].value = max;
            this.leftTopOptions.series[0].data[1].value = max;
            this.leftTopOptions.series[0].data[2].value = max;
            //console.log("032323232",this.bikeTotalNum);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
  },
};
</script>

<style scoped>
.page{
  background: #030D24;
}
/* 左侧弹窗 */
.left_model {
  width: 460px;
  height: 800px;
  position: absolute;
  left: -560px;
  top: 10%;
  padding: 0 12px;
  background-image: url("~@/assets/images/model_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: all 2s;
  z-index: 120;
}
.left_model .model_content {
  width: 100%;
  /* height: 740px; */
}
.left_model_title {
  position: relative;
  width: 100%;
  height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  text-align: center;
  /* margin-bottom: 20px; */
}
.left_model .left_model_title >>> .el-button--primary {
  background-color: #04132c;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 122;
}
.model_title{
    width: 100%;
    height: 50px;
    border:1px solid #1c95dc;
    margin-top: 20px;
    display: flex;
}
.model_title_item{
    flex:1;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.model_list{
    height: 660px;
    overflow-y: scroll;
}
.model_list::-webkit-scrollbar{
    display: none;
}
.model_list .model_list_item{
    display: flex;
    align-items: center;
    width: 100%;
    padding:10px 0;
    justify-content: space-around;
    color: #BCE4FC;
}
.model_list .model_list_item span{
    flex: 1;
    text-align: center;
}
/* 左侧弹窗 */
.model_box{
  width: 488px;
  height: 420px;
  position: absolute;
  left: -560px;
  top: 10%;
  background-image: url("~@/assets/images/bilkmodel_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: all 2s;
  z-index: 120;
  padding:0 8px;
  transition: all 2s;
  position: relative;
}
.model_box   >>> .el-button--danger {
  background-color: #04132c;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 122;
  border-color: #1FB3FF;
}
.model_box .address_list{
  width: 200px;
  color: #FFF;
  padding:0 10px;
  background: #01204D;
  border:1px solid #1FB3FF;
  border-radius: 4px;
  margin:0;
  position: absolute;
  left:8px;
  top:25%;
  z-index: 160;
}
.model_bottom{
    background-color: #071128;
}
.model_box .address_list li{
  width: 100%;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.model_box h1{
   position: relative;
  width: 100%;
  height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  text-align: center;
  margin:0 0 20px;
}
.model_top >>> .el-input{
  width: 180px;
  margin-right: 10px;
}
.model_top >>> .el-input .el-input__inner{
  background: #01204D;
  border:1px solid #1FB3FF
}
.model_top >>> .el-input ::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #1FB3FF;
}
.model_top >>> .el-select{
  width: 120px;
  margin-right: 10px;
}
.model_top >>> .el-input__inner{
  color: #1FB3FF;
}
.model_top >>> .el-select .el-input{
  width: 100%;
}
.model_top >>> .el-select .el-input .el-select__caret{
  color: #1FB3FF;
}
.model_top >>> .el-button--primary{
  background: #01204D;
}
.search_box {
  width: 400px !important;
  background: #fff;
  position: absolute;
  left: 12px;
  top: 10%;
  z-index: 6666;
}
.shareBike_c_t_title {
  padding-top: 8px;
  padding-left: 16px;
  padding-bottom: 4px;
  font-size: 12px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 18px;
}
.shareBike_c_t_info {
  font-size: 12px;
  padding-left: 16px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 400;
  color: #bfe8ff;
  line-height: 18px;
  padding-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 18px;
}
.shareBike_c_t {
  position: absolute;
  top: 142px;
  right: 493px;
  width: 160px;
  height: 100px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
  z-index: 100;
}
.shareBike_r_c {
  position: absolute;
  right: 13px;
  top: 410px;
  height: 304px;
  width: 456px;
  z-index: 100;
}
.shareBike_r_c_body {
  height: 264px;
  clear: both;
  margin-top: -1px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.shareBike_r_t {
  position: absolute;
  right: 13px;
  top: 123px;
  height: 256px;
  width: 456px;
  z-index: 100;
}
.shareBike_r_t_body {
  margin-top: -1px;
  clear: both;
  width: 456px;
  height: 216px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.shareBike_r_t_box {
  padding: 16px 3px;
}
.shareBike_r_t_title {
  padding-top: 40px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 18px;
}
.shareBike_r_t_item {
  width: 140px;
  height: 184px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  cursor: pointer;
  margin: 0 auto;
  border: 1px solid rgba(27, 158, 234, 0.6);
}
.shareBike_r_t_num {
  font-size: 40px;
  font-family: DINAlternate-Bold, DINAlternate;
  color: rgba(255, 255, 255, 1);
  line-height: 28px;
  font-weight: bold;
  width: 100px;
  margin: 0 auto;
}
.shareBike_l_b {
  position: absolute;
  /* left: 12px; */
   transition: all 2s;
  bottom: 48px;
  width: 456px;
  height: 290px;
  z-index: 100;
}
.shareBike_l_b_header {
  height: 40px;
  background-image: url("~@/assets/images/shareBike_l_b_bg.png");
  background-position: 0 0;
  background-size: 456px 40px;
  background-repeat: no-repeat;
  padding-left: 55px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
}
.shareBike_l_b_body {
  height: 250px;
  overflow: hidden;
  width: 456px;
  position: relative;
  margin-top: -1px;
}
.roadIn_l_b_tb_h {
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 45, 103, 1) 0%,
    rgba(5, 16, 42, 1) 100%
  );
  border: 1px solid rgba(27, 158, 234, 1);
}
.roadIn_l_b_tb_b {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.shareBike_l_c {
  position: absolute;
  /* left: 12px; */
  transition: all 2s;
  top: 410px;
  width: 456px;
  height: 264px;
  z-index: 100;
}
.shareBike_l_c_header {
  height: 40px;
  background-image: url("~@/assets/images/shareBike_l_c_bg.png");
  background-position: 0 0;
  background-size: 456px 40px;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
}
.shareBike_l_c_body {
  width: 456px;
  height: 264px;
  background: rgba(5, 16, 42, 1);
  opacity: 0.8;
  border: 1px solid rgba(27, 158, 234, 1);
}
.shareBike_l_t {
  position: absolute;
  /* left: 12px; */
   transition: all 2s;
  top: 123px;
  width: 456px;
  height: 256px;
  z-index: 100;
}
.shareBike_l_t  .common_head{
  cursor: pointer;
}
.shareBike_l_t_body {
  clear: both;
  width: 456px;
  height: 216px;
  margin-top: -1px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
  position: relative;
}
.shareBike_r_b {
  position: absolute;
  right: 12px;
  width: 456px;
  height: 288px;
  bottom: 48px;
  z-index: 100;
}
.shareBike_r_b_header {
  height: 40px;
  background-image: url("~@/assets/images/shareBike_r_b_bg.png");
  background-repeat: no-repeat;
  background-size: 306px 40px;
  background-position: center 0;
  text-align: center;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
}
.shareBike_r_b_body {
  width: 456px;
  height: 248px;
  position: relative;
  width: 456px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
  margin-top: -1px;
}
.shareBike_r_b_box {
  padding: 0 20px;
}
.shareBike_center_img {
  width: 992px;
  height: 992px;
  position: absolute;
  top: 45px;
  left: 50%;
  z-index: 101;
  margin-left: -496px;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  background-image: url("~@/assets/images/shareBike_center_img.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 992px 992px;
  animation: rotate 4s linear infinite;
}
.shareBike_center_mark {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: hidden;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  background-image: url("~@/assets/images/center_mark.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 1920px 1080px;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180eg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180eg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

>>> .el-table,
.el-table__expanded-cell {
  background: none;
}
>>> .el-table tr:hover {
  background: none;
}
>>> .el-table td,
.el-table th.is-leaf {
  border: none;
}
>>> .el-table,
>>> .el-table * {
  border: none;
}
>>> .el-table .cell {
  line-height: 66px;
  font-size: 14px;
  font-weight: bold;
  color: #32ffb4;
}

>>> .el-table th > .cell {
  line-height: 50px;
  color: #bfe8ff;
  font-size: 18px;
  font-weight: bold;
}
>>> .el-table .el-table__body tr:nth-child(odd) {
  background: rgba(50, 63, 98, 0.2);
}
.shareBike_r_t_num .d-roll-wrapper {
  margin: 2px auto;
}
.shareBike_center_bottom {
  position: absolute;
  right: 500px;
  bottom: 35px;
  text-align: right;
  font-size: 16px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 24px;
  z-index: 101;
  display: flex;
  align-items: center;
}
.shareBike_center_bottom .d-roll-wrapper {
  padding: 0 8px;
  font-weight: bold;
  color: #31feb3;
  line-height: 47px;
  font-size: 48px;
}
/* .shareBike_center_bottom .block_span{
        display: block;
        width: 200px;
    } */
.shareBike_center_bottom .d-roll-wrapper {
  width: auto !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
}
/* .shareBike_center_bottom span{
        padding:0 8px;
        font-weight:bold;
        color:#31FEB3;
        line-height:47px;
        font-size: 48px;
    } */
/* .bmView>div:nth-child(1){
        background-color: transparent!important;
    } */

</style>
<style>
.el-table tbody tr:hover > td {
  background: rgba(50, 63, 98, 0.3) !important;
}
.el-table td,
.el-table th {
  padding: 0;
}

.el-table th,
.el-table tr {
  background: none;
}
.el-table::before {
  height: 0;
}

.el-table * {
  border: none !important;
}
</style>
